<template>
  <div class="table m7fixed footerfx">
    <el-table
      ref="reportTable"
      :id="random"
      :data="data"
      style="width: 100%"
      size="mini"
      stripe
      :show-header="true"
      >
      <template v-for="(item, index) in config">
        <el-table-column
          v-if="(Exclude.includes(item.name) || item.name.indexOf('_formulas_') > -1) && item.show === true"
          :prop="item.name"
          :key="(item.timeType || 'none')  + index"
          :label="item.displayname"
          sortable
          :sort-method="sortMethod(item.name)"
          ></el-table-column>
        <el-table-column
          v-else-if="item.show === true && item.name.indexOf('_formulas_') === -1"
          :prop="item.name"
          :label="item.displayname"
          sortable
          :sort-method="sortMethod(item.name)"
          :key="(item.timeType || 'none') + index"
          :show-overflow-tooltip = "bool"
          >
          <template scope="scope">
            <el-popover trigger="hover" placement="top">
              <p style="line-height: 18px; font-size: 12px; color: #262626;">{{ scope.row.agentName }}</p>
              <p v-for="(value, key) in tipTag(scope.row, item.name)" :key="key" style="padding-left: 10px; line-height: 18px; font-size: 12px; color: #262626;">{{ key }}: {{ value }}</p>
              <div slot="reference" class="name-wrapper">
                <p>{{ scope.row[item.name] }}</p>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-table
      v-if="sum"
      size="mini"
      :id="random + '_sum'"
      :data="sum"
      style="display: none;width: 100%"
      :show-header="false"
      ref="tableSum"
      >
      <template v-for="(item, index) in config">
        <el-table-column
          v-if="item.show === true"
          :prop="item.name"
          :key ="(item.timeType || 'none') + index"
          :label="item.displayname"
          ></el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  import {cusSort} from '@/utils/reportUtils.js'
  export default {
    name: 'sum',
    data () {
      return {
        Exclude: ['CallInAcceptCount', 'CallOutAcceptCount', 'TransferAcceptCount', 'approveSurveyCount', 'approveSurveyRate', 'agentInviteRate', 'agentPushCount', 'totalPushCount', 'inviteRate', 'agentName', 'sessionCount', 'appraiseRate', 'totalAppraiseCount', 'agentCount', 'systemCount', 'appraiseRateOld', 'agent_name', 'NormalTransferAcceptCount', 'DialTransferAcceptCount', 'UserInviteCount', 'InviteCount', 'agentPushSucceedCount'], // 排除满意度数组
        bool: true, // 表格列超出显示点绑定值Bool
        random: Math.random(), // 渲染table的id
        style: 'width: 100%;', // table绑定样式
        theight: 'fixed', // table绑定高度值
        isResizeThree: true // 窗口改变时，绑定变量值
      }
    },
    props: {
      data: {
        type: Array,
        default: function () {
          return []
        }
      },
      sum: {
        type: Array,
        default: function () {
          return []
        }
      },
      config: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      tableStyle () {
        let parentDom = this.$el
        let headerDom = parentDom.querySelectorAll('.el-table .el-table__header-wrapper .el-table__header')[0]
        let bodyWrapper = parentDom.querySelectorAll('.el-table .el-table__body-wrapper')[0]
        let headerHeight = headerDom ? headerDom.clientHeight : 0
        if (headerHeight && this.data.length !== 0) {
          let headH = 126 + headerHeight + 'px'
          bodyWrapper.style.maxHeight = 'calc(100vh - ' + headH + ')'
        }
      },
      // 处理具体评价名称的个数 返回对象
      tipTag (obj, name) {
        let conten = {}
        for (let i in obj) {
          if (i.indexOf(name + '_') > -1) {
            conten[i.split('_')[1]] = obj[i]
          }
        }
        return conten
      },
      // 像table底部添加合计 避免合计也参加排序
      appendTfoot () {
        this.$nextTick(function () {
          if (this.data.length !== 0) {
            let target = document.getElementById(this.random)
            let heji = document.getElementById(this.random + '_sum')
            let tr = heji.getElementsByTagName('tr')
            if (tr[0]) {
              let tfoot = document.createElement('tfoot')
              tfoot.appendChild(tr[0])
              target.getElementsByTagName('table')[1].appendChild(tfoot)
            }
          }
        })
      },
      // 自定义的排序方法
      // 数字直接排序
      // String时分秒形式以：分隔转数字排序
      // String带 % s 转浮点数排序
      // 剩下中文用这个localeCompare排序
      sortMethod (name) {
        return cusSort(name)
        // return function (c, d) {
        //   if (typeof c[name] === 'number' || (name.includes('_formulas') && c[name].indexOf(':') === -1 && c[name].indexOf('%') === -1)) {
        //     return parseInt(d[name]) - parseInt(c[name])
        //   } else if (c[name].indexOf(':') > -1 && d[name].indexOf(':') > -1 && parseInt(c[name].split(':').join('')) && parseInt(d[name].split(':').join('')) && name !== 'ReportTime' && name !== 'reportTime') {
        //     return parseInt(d[name].split(':').join('')) - parseInt(c[name].split(':').join(''))
        //   } else {
        //     if (c[name].indexOf('%') > -1 || (d[name].indexOf('s') > -1 && c[name].indexOf('s') > -1)) {
        //       return parseFloat(d[name]) - parseFloat(c[name])
        //     } else {
        //       return d[name].localeCompare(c[name], 'zh')
        //     }
        //   }
        // }
      }
    },
    computed: {
      data1 () {
        return this.data
      }
    },
    watch: {
      // 监测数据变化处理表头自适应
      data1 (cur, pre) {
        let target = document.getElementById(this.random)
        if (!target) {
          return
        }
        let tfoot = target.getElementsByTagName('tfoot')[0]
        if (cur.length !== 0) {
          this.appendTfoot()
          if (tfoot) {
            tfoot.style.display = 'table-footer-group'
          }
        } else {
          if (tfoot) {
            tfoot.style.display = 'none'
          }
        }
        this.$nextTick(function () {
          if (this.$refs.table) {
            this.$refs.reportTable.doLayout()
          }
          if (this.$refs.tableSum) {
            this.$refs.tableSum.doLayout()
          }
          this.tableStyle()
          // setTimeout(function () { // 饿了么table第一次渲染是表头和body自适应之前高度是不准的，需要二次触发获取正确的高度
          //   window.onresize()
          // }, 500)
        })
      }
    },
    mounted () {
      let self = this
      window.addEventListener('resize', self.tableStyle)
    },
    activated () { // 在别的模块缩放了窗口回来的时候要触发一下重新计算
      let self = this
      if (!this.isResizeThree) {
        window.addEventListener('resize', self.tableStyle)
      }
      this.isResizeThree = true
      setTimeout(function () { // 可能table没加载完延迟执行一下
        self.tableStyle()
      }, 200)
    },
    deactivated () { // 离开后在别的模块缩放窗口不触发tableStyle()
      let self = this
      window.removeEventListener('resize', self.tableStyle)
      this.isResizeThree = false
    }
  }
</script>
<style lang="stylus" scoped>
  .table
    padding-bottom: 20px
</style>
